<div class="d-flex justify-content-center">
    <form (ngSubmit)="submit()" *ngIf="!(loadingDatabase$ | async); else loadingDatabaseTemplate" [formGroup]="form" novalidate>
        <h2>Log in</h2>
        <fieldset [disabled]="(signingIn$ | async) || false" class="form-group">
            <div class="form-group">
                <input
                    #passwordRef
                    [ngClass]="password.dirty ? {'is-invalid': password.invalid, 'is-valid': password.valid} : {}"
                    autocapitalize="off"
                    autocorrect="off"
                    class="form-control form-control-lg"
                    formControlName="password"
                    id="loginFormPasswordControl"
                    placeholder="Password"
                    spellcheck="off"
                    type="password"
                >
            </div>
            <button [disabled]="form.invalid" class="btn btn-lg btn-primary btn-block" type="submit">
                <i *ngIf="signingIn$ | async" class="fa fa-spinner fa-pulse fa-fw"></i>
                Submit
            </button>
            <div class="form-check text-right">
                <label class="form-check-label">
                    <input class="form-check-input" formControlName="savePassword" type="checkbox">
                    <electron-mail-save-password-label
                        [savePassword]="savePassword.value"
                    ></electron-mail-save-password-label>
                </label>
            </div>
        </fieldset>
    </form>
    <ng-template #loadingDatabaseTemplate>
        Local database is being loaded... Please wait up to {{ databaseLoadingTimeoutSeconds$ | async }} seconds.
    </ng-template>
</div>
